<!--
 * @FileDescription: this is my vue
 * @Author: zhuxin xu
 * @Date: 2022-12-14 11:01:39
 * @LastEditors: zhuxin xu
 * @LastEditTime: 2022-12-19 14:07:19
-->
<template>
  <div class="notice_tip_assembly">
    <el-dialog :visible.sync="visible" width="495px" :append-to-body="true" center>
      <div class="img">
        <img :src="title=='失效通知'?noticeImg:''" alt />
      </div>
      <div class="title">{{title}}</div>
      <div class="desc">{{desc}}</div>
      <div class="warning">{{warningDesc}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button class="comfire" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  name: "NoticeListTableTip",
  props: {
    title: {
      type: String,
      default: () => ""
    },
    show: {
      type: Boolean,
      default: () => false
    },
    desc: {
      type: String,
      default: () => null
    },
    warningDesc: {
      type: String,
      default: () => null
    }
  },

  data() {
    return {
      visible: this.show,
      noticeImg: require("@/assets/pic/Ending.png")
    };
  },
  watch: {
    show(newval) {
      this.visible = newval;
    },
    visible(newval) {
      if (!newval) this.$emit("cancel");
    }
  },
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    confirm() {
      this.$emit("ok", this.title);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-button {
    width: 158px;
    height: 48px;
    background: rgba(0, 0, 0, 0);
    border: 0.33px solid #e6e7e9;
    border-radius: 8px;
    font-family: Gellix-Medium;
    font-size: 17px;
    color: #162630 60%;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
  }
  .el-dialog {
    border: 0.33px solid rgba(22, 38, 48, 0);
    box-shadow: 0 0 100px 0 rgba(22, 38, 48, 0.2);
    border-radius: 8px;
  }
}
.comfire {
  background: #0066ff;
  color: #ffffff;
}

.img {
  width: 88px;
  height: 88px;
  margin: 0 auto;
  background-color: rgb(107, 36, 36);
}
.title {
  margin-top: 31px;
  text-align: center;
  font-family: PingFangSC-Medium;
  font-size: 21px;
  color: #000000;
  letter-spacing: -0.28px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 12px;
}
.desc {
  max-width: 395px;
  font-family: PingFangSC-Regular;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: -0.2px;
  text-align: center;
  line-height: 24px;
  font-weight: 400;
  margin: 0 auto;
}
.warning {
  font-family: PingFangSC-Regular;
  font-size: 15px;
  color: #d25541;
  letter-spacing: -0.2px;
  text-align: center;
  line-height: 24px;
  font-weight: 400;
}
</style>